<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SwtichButton</title>
</head>
<body>
<input id="cb" type="checkbox" style="display: none"/>
<label for="cb">
    <span class="btn"></span>
</label>
<section></section>
</body>
<style type="text/css">
    * {
        transition: 0.3s all;
    }

    body {
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100vw;
        height: 100vh;
    }
    section{
        width: 100vw;
        height: 100vh;
        background-color: darkgray;
        position: absolute;
        z-index: -1;
    }

    #cb + label {
        height: 30px;
        width: 60px;
        border-radius: 30px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) inset;
        position: relative;
        cursor: pointer;
    }

    .btn {
        position: absolute;
        border-radius: 30px;
        width: 24px;
        height: 24px;
        background-color: gray;
        left: 0px;
        margin: 3px;
    }

    #cb:checked + label .btn {
        left: calc(100% - 30px);
        transform: rotate(360deg);
    }

    #cb:checked + label {
        background: aquamarine;
        transform: scale(1.1);
    }

    #cb:checked + label .btn {
        background-color: #0055ff;
    }

    #cb:checked + label ~ section {
        background-color: aliceblue;
    }

</style>
</html>
